<template>
  <h1>大屏数据可视化模板展</h1>
  <div id="nav">
    <div class="photo-wall" v-on:click="routerNext">
      <img class="picture" src="../assets/smartCity/smartCity.jpg" />
    </div>
    <div class="photo-wall">
      <img class="picture" src="../assets/smartCity/smartSchool.gif" />
    </div>

    <div class="photo-wall">
      <img class="picture" src="../assets/smartCity/smartModel.jpg" />
    </div>
    <div class="photo-wall">
      <img class="picture" src="../assets/smartCity/smartMartket.jpg" />
    </div>
    <div class="photo-wall">
      <img class="picture" src="../assets/smartCity/smartWorld.jpg" />
    </div>
    <div class="photo-wall">
      <img class="picture" src="../assets/smartCity/smartTraffic.jpg" />
    </div>
    <div class="photo-wall">
      <img class="picture" src="../assets/smartCity/smartData.jpg" />
    </div>
    <div class="photo-wall">
      <img class="picture" src="../assets/smartCity/smartCountry.jpg" />
    </div>
    <div class="photo-wall">
      <img class="picture" src="../assets/smartCity/smartHispitory.gif" />
    </div>
  </div>
</template>
<script lang="ts">
import { Vue } from "vue-class-component";
export default class Home extends Vue {
  mounted() {
    const wid = document.body.clientWidth;
    const html = document.getElementsByTagName("html")[0];
    html.style.fontSize = wid / 20 + "px";
    window.onresize = function() {
      const wid = document.body.clientWidth;
      const html = document.getElementsByTagName("html")[0];
      html.style.fontSize = wid / 20 + "px";
    };
  }
  routerNext() {
    this.$router.push({ path: "/smartCity" });
  }
}
</script>

<style scoped>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}
body {
  background: #000d4a url(../assets/smartCity/bg.jpg) center top;
  background-size: cover;
  color: #666;
  font-size: 0.1rem;
}
h1 {
  color: #fff;
  text-align: center;
  font-size: 0.4rem;
  line-height: 0.8rem;
  margin: 0;
}
.photo-wall {
  width: 320px;
  height: 180px;
  border: solid 10px whitesmoke;
  margin: 20px;
}
.picture {
  z-index: 10000;
  width: 320px;
  height: 180px;
}
#nav {
  display: flex;
  flex-direction: row-reverse;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}

#nav a {
  font-weight: bold;
  color: #2c3e50;
}

#nav a.router-link-exact-active {
  color: #42b983;
}
</style>
